<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结算</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- <link href="css/main.css" /> -->
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/appindex.css" />
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script src="js/ajax.js"></script>

		<style>
			.two {
				width: 20%;
			}

			.tala {
				text-align: center;
				line-height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header style="background-color: red;height: 60px;">

				<van-nav-bar style="background-color: red; color: #07C160;" title="结算"  left-arrow @click-left="onClickLeft">

				</van-nav-bar>
			</header>
			<section>
				<van-badge-group style="margin-top:30px;">
					<van-badge title="商品清单" />
					
				</van-badge-group>
				<van-card v-for="(p,index) in order" :num="value" :price="p.GoodsPrice" :desc="p.Name" :thumb="p.GoodsImageUrl"
				 style="background: white;">
					<div slot="footer">
						<van-stepper v-model="value" integer :min="1" :max="50" :step="1"></van-stepper>
					</div>
				</van-card>
				<!-- <div>
					<van-card :num="newpay.buyCount" :price="newpay.RealPrice" :title="newpay.Name" :origin-price="newpay.MarketPrice">
						<div slot="footer">
							<van-stepper v-model="newpay.buyCount" :min="1" disable-input=true id="upDown"></van-stepper>
						</div>
						<div slot="thumb">

							<img :src="newpay.CoverImage" onerror="javascript:this.src='img/shopping_default_1.jpg';">
						</div>
					</van-card>
				</div> -->
				<van-badge-group style="margin-top: 20px;">
					
					<a href="Center/site.html"><van-badge title="收货地址"/></a>
					
				</van-badge-group>
				<van-cell-group>
					<van-cell-group>
						<van-field :value="datas.name" label="联系人:" disabled />
					</van-cell-group>
					<van-cell-group>
						<van-field :value="datas.tel" label="手机号码:" disabled />
					</van-cell-group>
					<van-cell-group>
						<van-field :value="datas.address" label="详细地址:" disabled />
					</van-cell-group>
					<van-cell-group>
						<a href="Center/site.html" ><van-field style="margin-left: 120px;" label="新增收获地址" /></a>
					</van-cell-group>
				</van-cell-group>

				<van-cell class="tala" style="height: 100%;">
					<van-col span="5"><img src="img/zhifubao.jpg" style="width:35px; height: 35px;"></van-col>
					<van-col span="19">
						<van-radio-group v-model="radio" checked-color="#07c160">
							<van-cell-group>
								<van-cell title="支付宝" clickable @click="radio = '1'">
									<van-radio name="1" />
								</van-cell>
							</van-cell-group>
						</van-radio-group>
					</van-col>
					<van-col span="5"><img src="img/weixin.jpg" style="width: 35px; height: 35px;margin-top: 20px;"></van-col>
					<van-col span="19">
						<van-radio-group v-model="radio" checked-color="#07c160">
							<van-cell-group>
								<van-cell title="微信支付" clickable @click="radio = '2'">
									<van-radio name="2" />
								</van-cell>
							</van-cell-group>
						</van-radio-group>
					</van-col>
				</van-cell>
			</section>
			<footer>
				<van-row style="text-align: center; line-height: 80px; margin-top: 50%;">
					<van-col span="12" style="width: 50%;height: 100%;background-color:#ffffff;" v-text="totalMoney">
						合计:<span style="color: red;">0</span>元
					</van-col>
					<!-- <van-col span="12" style="width: 50%;height: 100%;background-color: #FF4444;">
						支付
					</van-col> -->
				</van-row>
				<van-submit-bar :price="sum" button-text="提交订单" @submit="onSubmit"></van-submit-bar>
			</footer>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				newpay: "",
				value:1,
				datas: "",
				order:[],
				radio: '1',
				username: "",
				phone: "",
				orderId: '0',
				address: "",
				totalPrice: "",
				isShow: true,
				sum: 1,
				num: 1,
			},
			mounted() {
				var id = plus.webview.currentWebview();
				ajax({
					url: "http://dsapi.ysd3g.com/API/GoodsDetail",
					dataType: "jsonp",
					data: {
						gId: localStorage.getItem("Key")
					},
					success: function(res) {
						console.log(res)
						vm.newpay = {
							"Name": res.Detail.Name,
							"CoverImage": res.Detail.CoverImage,
							"RealPrice": res.Detail.RealPrice,
							"buyCount": vm.num,
						}
					}
				});
				ajax({
					url: "http://dsapi.ysd3g.com/API/MyShippingAddressList",
					dataType: "jsonp",
					data: {
						key: localStorage.getItem("Key")
					},
					success: function(res) {
						console.log(res);
						for (var i = 0; i < res.Data.length; i++) {
							if (res.Data[i].IsDefault) {
								vm.datas = res.Data[i];
							}
						}
					}
				});


				_this = this;
				var show = plus.webview.currentWebview().isShow;
				if (show) { //判断是从那里传来的数据
					ajax({ //B类页面
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							gId: plus.webview.currentWebview().productId || 11
						},
						success(res) {
							var d = {
								GoodsPrice: res.Detail.RealPrice,
								GoodsImageUrl: res.Detail.CoverImage,
								//BuyCount: 1,
								Name: res.Detail.Name
							}
							vm.order = vm.order.concat(d);
						}
					});
				} else { //购物车
					var pids = plus.webview.currentWebview().pids
					var Id;
					var Name;
					var GoodsImageUrl;
					var GoodsPrice;
					for (var i = 0; i < pids.length; i++) {
						ajax({
							url: "http://dsapi.ysd3g.com/API/GoodsDetail",
							dataType: "jsonp",
							data: {
								gId: pids[i].goodsId
							},
							success(res) {
								Id = res.Detail.Id;
								Name = res.Detail.Name;
								GoodsImageUrl = res.Detail.CoverImage;
								GoodsPrice = res.Detail.RealPrice;
								for (var j = 0; j < pids.length; j++) {
									if (Id == pids[j].goodsId) {
										vm.buyCount = pids[j].buyCount;
									}
								}
								vm.jsonData = {
									"Id": Id,
									"Name": Name,
									"GoodsImageUrl": GoodsImageUrl,
									"GoodsPrice": GoodsPrice,
									"BuyCount": vm.buyCount,
								}
								vm.order = vm.order.concat(vm.jsonData);
							}
						});
					}
				}
			},
			computed: {
				totalMoney() {
					this.totalPrice = 0;
					if (this.isShow) {
						// this.totalPrice = this.order[0].GoodsPrice * this.value
						return this.totalPrice;
					} else {
						for (var i = 0; i < this.order.length; i++) {
							this.totalPrice += this.order[i].GoodsPrice * this.order[i].BuyCount
						}
						return this.totalPrice;
					}
				}
			},
			methods: {
				onClickLeft() {
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				},
				onClick: function(Key) {
					this.actionKey = Key;
				},
				onSubmit: function() {
					var shoppingCartJsonStr = [];
					if (this.isShow) {
						shoppingCartJsonStr = [{
							goodsId: 3,
							buyCount: 1
							/* goodsId: plus.webview.currentWebview().productId,
							buyCount:this.value */
						}]
					} else {
						// shoppingCartJsonStr = plus.webview.currentWebview().pids
					}
					var toast = vm.$toast.loading({
						duration: 0, // 持续展示 toast
						forbidClick: true, // 禁用背景点击
						message: '正在生成订单'
					});
					ajax({
						url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
						dataType: "jsonp",
						data: {
							Key: localStorage.getItem("Key"),
							shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)
						},
						success(res) {
							if (res.Error) {
								vm.$toast.fail(res.Msg);
							} else {
								vm.orderId = res.OrderId;
								// localStorage.setItem(res.orderId);

								ajax({ //支付
									url: "http://dsapi.ysd3g.com/api/OrderPay",
									dataType: "jsonp",
									data: {
										Key: localStorage.getItem("Key"),
										// key: plus.storage.getItem("key"),
										oId: vm.orderId,
										payType: '1', //写死的支付宝
										addressIdx: "", //空的收货地址
										moey: vm.totalPrice //总价
									},
									success: function(res) {
										if (res.Error) {
											alert(res.Msg)
										} else {
											var payment = "";
											plus.payment.getChannels(function(s) {
												console.log(s);
												plus.payment.request(s[0], res.strJson, function() {
													vm.$toast.alert("支付操作成功！");
													localStorage.removeItem(orderId);
												}, function(e) {
													console.log(e);
													_this.$toast.fail(e.message);
												})
											}, function() {
												console.log(123)
												vm.$toast.alert("出现错误，请稍后再试！")
											})
										}
										console.log(res);
									}
								});

								vm.$toast.clear();

							}
						}
					});

					//支付
					/* var _this = this;
					console.log(newUser.Key); */

				}
			}


		})
	</script>
</html>
